<template>
  <div class="news-detail">
    <el-card shadow="never">
      <template #header>
        <div class="header-actions">
          <el-button @click="handleBack" :icon="ArrowLeft">返回</el-button>
          <h2>新闻详情</h2>
        </div>
      </template>
      
      <div v-if="newsDetail" class="news-content">
        <!-- 新闻标题 -->
        <h1 class="news-title">{{ newsDetail.title }}</h1>
        
        <!-- 新闻元信息 -->
        <div class="news-meta">
          <span class="meta-item">
            <el-icon><User /></el-icon>
            作者：{{ newsDetail.author }}
          </span>
          <span class="meta-item">
            <el-icon><Calendar /></el-icon>
            发布时间：{{ newsDetail.publishDate }}
          </span>
          <span class="meta-item">
            <el-icon><View /></el-icon>
            阅读量：{{ newsDetail.views }}
          </span>
        </div>
        
        <!-- 新闻封面 -->
        <div v-if="newsDetail.cover" class="news-cover">
          <img :src="newsDetail.cover" :alt="newsDetail.title" />
        </div>
        
        <!-- 新闻内容 -->
        <div class="news-body">
          <div class="content-text" v-html="newsDetail.content"></div>
        </div>
        
        <!-- 新闻标签 -->
        <div v-if="newsDetail.tags" class="news-tags">
          <span class="tags-label">标签：</span>
          <el-tag 
            v-for="tag in newsDetail.tags" 
            :key="tag" 
            class="tag-item"
            type="info"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>
      
      <!-- 加载状态 -->
      <div v-else class="loading-container">
        <el-skeleton :rows="8" animated />
      </div>
    </el-card>
    
    <!-- 相关新闻推荐 -->
    <el-card shadow="never" class="related-news">
      <template #header>
        <h3>相关新闻</h3>
      </template>
      
      <div class="related-list">
        <div 
          v-for="item in relatedNews" 
          :key="item.id" 
          class="related-item"
          @click="handleViewRelated(item)"
        >
          <div class="related-cover">
            <img :src="item.cover || '/placeholder.jpg'" :alt="item.title" />
          </div>
          <div class="related-content">
            <h4>{{ item.title }}</h4>
            <p>{{ item.summary }}</p>
            <span class="related-date">{{ item.publishDate }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, User, Calendar, View } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

const newsDetail = ref<any>(null)
const relatedNews = ref<any[]>([])

// 模拟新闻数据
const mockNewsData = {
  1: {
    id: 1,
    title: '医院举办慢病防治知识讲座',
    summary: '为提高市民对慢病的认知和防治意识，我院将于本周五下午举办慢病防治知识公益讲座...',
    author: '宣传科',
    publishDate: '2024-01-15',
    views: 1234,
    cover: '',
    content: `
      <p>为进一步提高广大市民对慢性疾病的认知和防治意识，增强健康意识，我院定于本周五下午2:30在门诊大楼5楼学术报告厅举办慢病防治知识公益讲座。</p>
      
      <h3>讲座内容</h3>
      <p>本次讲座将重点围绕以下几个方面展开：</p>
      <ul>
        <li>慢性疾病的定义和分类</li>
        <li>常见慢性疾病的预防措施</li>
        <li>慢性疾病的早期识别和诊断</li>
        <li>慢性疾病患者的日常管理</li>
        <li>健康生活方式的重要性</li>
      </ul>
      
      <h3>主讲专家</h3>
      <p>本次讲座邀请了我院内分泌科主任医师张教授主讲，张教授从事内分泌临床工作20余年，在慢性疾病防治方面有着丰富的临床经验。</p>
      
      <h3>参与方式</h3>
      <p>本次讲座免费向市民开放，欢迎广大市民朋友踊跃参加。由于座位有限，请有意参加的市民朋友提前到门诊一楼服务台进行预约登记。</p>
      
      <p>我院将持续开展各类健康教育活动，为市民提供更多的健康知识和服务，共同构建健康和谐的社区环境。</p>
    `,
    tags: ['健康教育', '慢病防治', '公益讲座']
  },
  2: {
    id: 2,
    title: '新引进的高端医疗设备正式投入使用',
    summary: '经过严格的调试和测试，我院新引进的高端医疗设备已通过验收，正式投入使用...',
    author: '医学装备科',
    publishDate: '2024-01-14',
    views: 856,
    cover: '',
    content: `
      <p>近日，我院新引进的高端医疗设备经过严格的安装调试和功能测试，顺利通过专家验收，正式投入临床使用。</p>
      
      <h3>设备简介</h3>
      <p>本次引进的设备包括：</p>
      <ul>
        <li>64排螺旋CT机一台</li>
        <li>3.0T磁共振成像系统一套</li>
        <li>数字化X线摄影系统两套</li>
        <li>超声诊断仪三台</li>
      </ul>
      
      <h3>技术优势</h3>
      <p>新设备具有以下技术优势：</p>
      <ul>
        <li>成像速度更快，检查时间大幅缩短</li>
        <li>图像清晰度显著提升，诊断准确率更高</li>
        <li>辐射剂量降低，患者安全性进一步提升</li>
        <li>操作更加智能化，提高工作效率</li>
      </ul>
      
      <h3>服务提升</h3>
      <p>新设备的投入使用将显著提升我院的医疗服务水平，为患者提供更加精准、高效的诊疗服务。同时，我院将继续加大医疗设备投入，不断提升医疗技术水平。</p>
    `,
    tags: ['医疗设备', '技术升级', '服务提升']
  },
  3: {
    id: 3,
    title: '医院成功举办一年一度的职工体检活动',
    summary: '为保障职工身体健康，提高工作效率，我院组织开展了一年一度的职工体检活动...',
    author: '人事科',
    publishDate: '2024-01-13',
    views: 623,
    cover: '',
    content: `
      <p>为切实保障全院职工身体健康，提高工作效率和生活质量，我院于近期组织开展了一年一度的职工健康体检活动。</p>
      
      <h3>体检项目</h3>
      <p>本次体检项目包括：</p>
      <ul>
        <li>常规体格检查</li>
        <li>血常规、尿常规检查</li>
        <li>生化指标检测</li>
        <li>心电图检查</li>
        <li>胸部X线检查</li>
        <li>腹部超声检查</li>
        <li>妇科检查（女性）</li>
      </ul>
      
      <h3>体检结果</h3>
      <p>本次体检共有320名职工参加，体检结果总体良好。针对体检中发现的问题，医院将：</p>
      <ul>
        <li>建立职工健康档案</li>
        <li>提供个性化健康指导</li>
        <li>定期进行健康状况跟踪</li>
        <li>组织健康知识培训</li>
      </ul>
      
      <h3>健康关怀</h3>
      <p>医院将继续关注职工健康，定期组织体检活动，为职工提供更好的健康保障，营造健康和谐的工作环境。</p>
    `,
    tags: ['职工体检', '健康管理', '员工关怀']
  }
}

// 模拟相关新闻数据
const mockRelatedNews = [
  {
    id: 4,
    title: '医院获得省级医疗质量奖',
    summary: '我院在省级医疗质量评比中获得优秀奖...',
    publishDate: '2024-01-10',
    cover: ''
  },
  {
    id: 5,
    title: '新冠疫苗接种通知',
    summary: '关于开展新冠疫苗接种工作的通知...',
    publishDate: '2024-01-08',
    cover: ''
  },
  {
    id: 6,
    title: '医院精神文明建设取得新成果',
    summary: '我院在精神文明建设方面取得显著成果...',
    publishDate: '2024-01-05',
    cover: ''
  }
]

onMounted(() => {
  loadNewsDetail()
  loadRelatedNews()
})

const loadNewsDetail = () => {
  const newsId = route.params.id as string
  const detail = mockNewsData[newsId as keyof typeof mockNewsData]
  
  if (detail) {
    setTimeout(() => {
      newsDetail.value = detail
      // 增加阅读量
      newsDetail.value.views += 1
    }, 500)
  } else {
    ElMessage.error('新闻不存在')
    router.push('/news/list')
  }
}

const loadRelatedNews = () => {
  relatedNews.value = mockRelatedNews
}

const handleBack = () => {
  router.go(-1)
}

const handleViewRelated = (news: any) => {
  router.push(`/news/detail/${news.id}`)
}
</script>

<style lang="scss" scoped>
.news-detail {
  .header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    
    h2 {
      margin: 0;
      color: #303133;
    }
  }
  
  .news-content {
    .news-title {
      font-size: 28px;
      color: #303133;
      margin: 0 0 20px 0;
      line-height: 1.4;
      font-weight: 600;
    }
    
    .news-meta {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f0f0f0;
      
      .meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #606266;
        font-size: 14px;
        
        .el-icon {
          color: #909399;
        }
      }
    }
    
    .news-cover {
      margin-bottom: 24px;
      text-align: center;
      
      img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      }
    }
    
    .news-body {
      margin-bottom: 32px;
      
      .content-text {
        line-height: 1.8;
        color: #303133;
        font-size: 16px;
        
        :deep(h3) {
          color: #409eff;
          margin: 24px 0 16px 0;
          font-size: 20px;
        }
        
        :deep(p) {
          margin: 16px 0;
          text-align: justify;
        }
        
        :deep(ul) {
          margin: 16px 0;
          padding-left: 24px;
          
          li {
            margin: 8px 0;
            list-style-type: disc;
          }
        }
      }
    }
    
    .news-tags {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 20px;
      border-top: 1px solid #f0f0f0;
      
      .tags-label {
        color: #606266;
        font-size: 14px;
      }
      
      .tag-item {
        margin-right: 8px;
      }
    }
  }
  
  .loading-container {
    padding: 20px 0;
  }
  
  .related-news {
    margin-top: 24px;
    
    h3 {
      margin: 0;
      color: #303133;
    }
    
    .related-list {
      .related-item {
        display: flex;
        padding: 16px 0;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          background: #f8f9fa;
          padding: 16px 12px;
          margin: 0 -12px;
          border-radius: 8px;
        }
        
        &:last-child {
          border-bottom: none;
        }
        
        .related-cover {
          width: 80px;
          height: 60px;
          margin-right: 12px;
          flex-shrink: 0;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
            background: #f5f5f5;
          }
        }
        
        .related-content {
          flex: 1;
          
          h4 {
            margin: 0 0 8px 0;
            font-size: 16px;
            color: #303133;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          
          p {
            margin: 0 0 8px 0;
            font-size: 14px;
            color: #606266;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          
          .related-date {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
  }
}
</style>